<template>
  <div class="component-teamInfo">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>施工队信息
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <div class="component-searchHeader">
      <div class="search-header">
        <div class="left-title">
          <p class="left-text">
            <span class="iconfont" style="font-weight:700">&#xe63d;</span>筛选查询
          </p>
          <div class="right">
            <button @click="findRes">查询</button>
          </div>
        </div>
      </div>
    </div>

    <div class="component-search-box">
      <el-form :inline="true" :model="teamSearch" class="demo-form-inline">
        <el-form-item v-show="ms_roleName == 'CenterClerk' || ms_roleName == 'CenterDeputy' || ms_roleName == 'CenterFinanceClerk' || ms_roleName == 'CenterFinanceManager' || ms_roleName == 'CenterBOSS'" label="项目部：" style="width:325px;">
          <el-select v-model="teamSearch.pro" clearable placeholder="请选择项目部">
            <el-option v-for="(item,index) in proList" :key="index" :label="item.orgName" :value="item.orgId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="施工队：" style="width:325px;">
          <el-select v-model="teamSearch.team" clearable placeholder="请选择施工队">
            <el-option v-for="(item,index) in teamList" :key="index" :label="item.orgName" :value="item.orgId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属区域：">
          <el-cascader
            clearable
            :options="teamSearch.area"
            v-model="teamSearch.workarea"
            style="width:220px;"
            class="wd400">
          </el-cascader>
        </el-form-item>
        <el-form-item label="施工队类型：" style="width:325px;margin-left: 10px;">
          <el-select v-model="teamSearch.type" clearable placeholder="请选择施工队类型">
            <!--1-管道，2-线路，3-设备，4-熔纤，5-跳纤-->
            <el-option label="管道" value="1"></el-option>
            <el-option label="线路" value="2"></el-option>
            <el-option label="设备" value="3"></el-option>
            <el-option label="熔纤" value="4"></el-option>
            <el-option label="跳纤" value="5"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div class="component-listHeader">
      <div class="search-header">
        <div class="left-title">
          <p class="left-text">
            <span class="iconfont">&#xe61e;</span>
            施工队信息
          </p>
          <div class="right">
            <button @click="$router.push('/addTeam')">添加施工队</button>
          </div>
        </div>
      </div>
    </div>

    <div class="table">
      <el-table
        ref="multipleTable"
        :data="teamInfo"
        tooltip-effect="dark"
        style="width: 1100px;margin:0 auto"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" align="center" width="55"></el-table-column>
        <el-table-column label="编号" align="center" prop="orgNumber"></el-table-column>
        <el-table-column label="施工队名称" align="center" prop="orgName"></el-table-column>
        <el-table-column label="施工队类型" align="center" prop="workFunction">
          <!--1-管道，2-线路，3-设备，4-熔纤，5-跳纤-->
          <template slot-scope="scope">
            <div v-if="scope.row.workFunction != undefined">
              <span v-if="scope.row.workFunction.match(RegExp(/1/))">管道</span>
              <span v-if="scope.row.workFunction.match(RegExp(/2/))">线路</span>
              <span v-if="scope.row.workFunction.match(RegExp(/3/))">设备</span>
              <span v-if="scope.row.workFunction.match(RegExp(/4/))">熔纤</span>
              <span v-if="scope.row.workFunction.match(RegExp(/5/))">跳纤</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="队长" align="center" prop="userTruename"></el-table-column>
        <el-table-column label="区域" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.orgProvince}}</span>
            <span>{{scope.row.orgCity}}</span>
            <span>{{scope.row.orgArea}}</span>
          </template>
        </el-table-column>
        <el-table-column label="队人数" align="center" prop="teamCount"></el-table-column>
        <el-table-column label="操作信息" width="160" align="center">
          <template slot-scope="scope">
            <div>
              <a @click="setPrice(scope.row.orgId)" type="text" size="small" class="red">设置结算价格</a>
              <a @click="handleCheck(scope.row.orgId)" type="text" size="small" class="red">查看详情</a>
            </div>
            <div>
              <a @click="payAccount(scope.row)" type="text" size="small" class="red">收款账号维护</a>
              <a @click="handleSubmitManage(scope.$index, scope.row)" type="text" size="small" class="red">编辑</a>
              <a @click="handleSignleDelete(scope.row.orgId)" type="text" size="small" class="red">删除</a>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="component-paging" v-if="teamInfo.length > 0">
      <div class="table-bottom">
        <div class="bottom-left" style="margin-left: 42px;">
          <button @click="handleDelete">删除</button>
        </div>
        <div class="paging">
          <div class="paging-left">
            <p>
              共
              <span>{{Math.ceil(total/pageSize)}}</span> 页/
              <span>{{total}}</span> 条数据
            </p>
          </div>
          <el-pagination
            background
            @size-change="SizeChange($event,dataInit,currentPage,pageSize)"
            @current-change="CurrentChange($event,dataInit,currentPage,pageSize)"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>

    <!--收款账号维护-->
    <div class="component-model component-modelPay">
      <el-dialog title="收款账号维护" :visible.sync="payFlag" width="600px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
          <el-form-item label="账号：" prop="accountNo" style="margin-bottom: 20px;">
            <el-input v-model="ruleForm.accountNo" style="width: 350px;"></el-input>
          </el-form-item>
          <el-form-item label="开户行：" prop="bankName" style="margin-bottom: 20px;">
            <el-input v-model="ruleForm.bankName" style="width: 350px;"></el-input>
          </el-form-item>
          <el-form-item label="开户网点：" prop="bankNet" style="margin-bottom: 20px;">
            <el-input v-model="ruleForm.bankNet" style="width: 350px;"></el-input>
          </el-form-item>
          <el-form-item label="账号归属主体：" prop="belongOrgs" style="margin-bottom: 20px;">
            <el-input v-model="ruleForm.belongOrgs" style="width: 350px;" disabled></el-input>
          </el-form-item>
          <el-form-item label="收款人姓名：" prop="accountUsername" style="margin-bottom: 20px;">
            <el-input v-model="ruleForm.accountUsername" style="width: 350px;"></el-input>
          </el-form-item>
          <el-form-item label="主体类型：" prop="orgType" style="margin-bottom: 20px;">
            <el-select v-model="ruleForm.orgType" placeholder="请选择主体类型" style="width:350px;">
              <el-option v-for="(item,index) in payList" :label="item.accountName" :value="item.accountId" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账号类型：" prop="accountType" style="margin-bottom: 20px;">
            <el-select v-model="ruleForm.accountType" placeholder="请选择账号类型" style="width:350px;">
              <el-option v-for="(item,index) in receList" :label="item.accountName" :value="item.accountId" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="payBtn">
              <a @click="submitForm('ruleForm')">完成</a>
              <a @click="resetForm('ruleForm')">重置</a>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

  </div>
</template>

<script>
  import area from '@/assets/js/area.js'
export default {
  name: "teamInfo",
  data() {
    return {
      ms_roleName:localStorage.getItem("roleName"),
      teamSearch: {
        team: "",
        type: "",
        area:area, //省市区
        workarea: ["", "", ""], //省市区
        pro:'',//项目部
      },
      teamInfo: [],//列表信息
      total: 10, // 数据总条数
      pageSize: 10,// 每页显示数据的条数
      currentPage: 1,// 当前显示的页面页码
      teamList:[],//施工队列表
      teamType:[],//施工队类型
      multipleSelection:[],//全选
      proList:[],//项目部列表
      payFlag:false,//账号维护弹框
      ruleForm: {
        accountNo:'',//账号
        bankName:'',//开户行
        bankNet:'',//开户网点
        belongOrgs:'',//账号归属主体
        accountUsername:'',//收款人姓名
        orgType:'',//主体类型
        accountType:'',//账号类型
      },
      rules: {
        accountNo: [
          {required: true, message: '请输入账号', trigger: 'blur'},
        ],
        bankName: [
          {required: true, message: '请输入开户行', trigger: 'blur'},
        ],
        bankNet: [
          {required: true, message: '请输入开户网点', trigger: 'blur'},
        ],
        belongOrgs: [
          {required: true, message: '请输入账号归属主体', trigger: 'blur'},
        ],
        accountUsername: [
          {required: true, message: '请输入收款人姓名', trigger: 'blur'},
        ],
        orgType: [
          {required: true, message: '请选择主体类型', trigger: 'change'},
        ],
        accountType:[
          { required: true, message: '请选择账号类型', trigger: 'change' }
        ]
      },
      payList:[
        /*{accountName:'公司账号',accountId:'0'},
        {accountName:'甲方账号',accountId:'1'},*/
        {accountName:'施工队',accountId:'2'},
      ],
      receList:[
        {accountName:'银行账号',accountId:'bank'},
        {accountName:'微信',accountId:'wechat'},
        {accountName:'支付宝',accountId:'alipay'},
      ]
    };
  },
  mounted(){
    this.dataInit();
    this.teamLists(); //施工队列表
    this.teamTypes();//施工队类型
    this.proLists();//项目列表
  },
  methods: {
    //项目部列表
    proLists(){
      let that = this;
      let suCb = function(res){
        that.proList = res.data.data;
        console.log(res.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
      }
      let palyParam = {
        url: "/api/web/proTeam/getDeparName",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //施工队信息列表
    dataInit(){
      let that = this;
      let suCb = function(res){
        that.teamInfo = res.data.data.records;
        that.total = res.data.data.rowCount;
        console.log(that.teamInfo)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        pageCurrent: that.currentPage.toString(),
        pageSize:that.pageSize.toString(),
        leaderName: that.teamSearch.team,
        majorType: that.teamSearch.type,
        orgProvince: that.teamSearch.workarea[0],
        orgCity: that.teamSearch.workarea[1],
        orgArea: that.teamSearch.workarea[2],
        orgId:that.teamSearch.pro
      }
      let palyParam = {
        url: "/api/web/proTeam/findAll",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //获取施工队列表
    teamLists(){
      let that = this;
      let suCb = function(res){
        that.teamList = res.data.data
        console.log(that.teamList)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {}
      let palyParam = {
        url: "/api/web/proTeam/getAllTeamList",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //获取施工队类型
    teamTypes(){
      let that = this;
      let suCb = function(res){
        that.teamType = res.data.data
//        console.log(that.teamType)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {}
      let palyParam = {
        url: "/api/web/proTeam/getTeamType",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //详情
    handleCheck(val){
      this.$router.push({name:"seeDetails",params: {
        id: val,
      }})
    },
    //省事级联
    getArea(value, selectedData) {
      const areaName = selectedData.map(item => item.label)
      this.args = [...areaName]
    },
    //全选
    handleSelectionChange(val) {
      let arr = [];
      if(val.length > 0){
        val.forEach( item => {
          arr.push(item.orgId)
          this.multipleSelection = arr;
        })
      }else{
        this.multipleSelection = [];
      }
      console.log(this.multipleSelection)
    },
    //编辑
    handleSubmitManage(val,vals){
      this.$router.push({name:"editTeam",params: {
        id: vals.orgId,
        orgLeader:vals.orgLeader
      }})
    },
    //删除
    del(val){
      let that = this;
      let suCb = function(res){
        that.$message({
          message: '删除成功',
          type: 'success'
        });
        that.dataInit()
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        Id:val
      }
      let palyParam = {
        url: "/api/web/proTeam/deleteById",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //批量删除
    handleDelete() {
      let that = this;
      if(this.multipleSelection != undefined && this.multipleSelection.length >= 1){
        that.$confirm('确认删除吗？')
          .then(_ => {
            that.del(that.multipleSelection);
          })
          .catch(_ => {});
      }else{
        this.$alert('请选择所要删除的内容', '提示', {
          confirmButtonText: '明白了',
        });
      }
    },
    //单个删除
    handleSignleDelete(val){
      this.$confirm('确认删除吗？')
        .then(_ => {
          this.del(val.split(" "));
        })
        .catch(_ => {});
    },
    //点击查询
    findRes(){
      this.currentPage = 1;
      this.dataInit();
    },
    //设置结算价格
    setPrice(val){
        this.$router.push({name:'setTeamCount',query:{orgId:val}})
    },
    //表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let suCb = res => {
            this.payFlag=!this.payFlag;
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.ruleForm = {}
          }
          let palyParam = {
            url: "/api/web/proTeam/addBankAccount",
            methods:'post',
            data: this.ruleForm,
            success: suCb,
          }
          this.$https(palyParam)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //收款账户维护
    payAccount(val){
        console.log(val)
      this.payFlag=!this.payFlag;
      this.ruleForm.belongOrgs = val.orgName;
      this.ruleForm.belongOrg = val.orgId;
      //查询
      let suCb = res => {
        this.ruleForm = this.deepClone(res.data.data);
        this.ruleForm.belongOrgs = this.deepClone(val.orgName);
        this.ruleForm.belongOrg = this.deepClone(val.orgId);
//        this.ruleForm.accountUsername = this.deepClone(res.data.data.accountUsername);
        console.log(res.data)
      }
      let palyParam = {
        url: "/api/web/proTeam/getBankAccountByOrgId",
        methods:'post',
        data: {orgId:val.orgId},
        success: suCb,
      }
      this.$https(palyParam)
    }
  }
};
</script>

<style scoped>
.component-searchHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
}

.component-searchHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-searchHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  line-height: 45px;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-searchHeader .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}

.component-searchHeader .right button {
  padding: 0 25px;
  height: 30px;
  margin: 8px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-searchHeader .right button:hover {
  background-color: #f3f3f3;
  cursor: pointer;
}
.component-search-box {
  width: 1100px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-top: none;
  margin: 0 auto;
  text-align: left;
  padding-left: 30px;
  line-height: 60px;
  padding-bottom: 15px;
  padding-top: 15px;
}
.component-search-box .el-input__inner {
  height: 35px;
  display: inline-block;
}
.el-form-item {
  margin-bottom: 0;
}
.component-listHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  border-bottom: none;
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
}

.component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  line-height: 45px;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-listHeader .search-header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.component-listHeader .search-header .right button {
  padding: 0 15px;
  height: 30px;
  width: 110px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #1abc9c;
  background-color: #fff;
  border: 1px solid #ccc;
}
.el-form-item {
  text-align: right;
  width: 310px;
}
.component-listHeader .search-header .right button:hover {
  background-color: #1abc9c;
  color: #fff;
}
.component-listHeader .search-header .right .right-select-margin {
  margin-top: 8px;
  margin-right: 8px;
}
.payBtn a{
  padding: 10px 20px;
}
.payBtn a:first-of-type{
  background: #1ABC9C;
  color: #fff;
  border-radius: 4px;
}
.payBtn a:last-of-type{
  border:1px solid #ccc;
  margin-left: 20px;
  border-radius: 4px;
}
/* 删除按钮 */
.red {
  color: #48c9b0;
  font-size: 12px;
  cursor: pointer;
  margin-right: 4px;
}
</style>
